<template>
    <ul class="mui-table-view">
        <li :key="item.id" v-for="item in newsList" class="mui-table-view-cell mui-media">
            <router-link :to="'/home/newInfo/' + item.id ">
                <img class="mui-media-object mui-pull-left" :src="item.realImgUrl">
                <div class="mui-media-body">
                    {{item.title}}
                    <p class='mui-ellipsis'>
                        <span class="f-left">发表时间：{{item.formatDateTime | formatDate}}</span>
                        <span class="f-right">点击：{{item.num}}次</span>
                    </p>
                </div>
            </router-link>
        </li>

    </ul>
</template>

<script>
    export default {
        name: "newsList",
        created() {
            this.getNewsList();
        },
        data() {
            return {
                newsList: []
            }
        },
        methods: {
            getNewsList() {
                this.$http.get('newsList.main',{}).then(function (result) {
                    if (result.status === 200) {
                        console.log(result);
                        this.newsList = result.body;
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .mui-table-view .mui-media-body {
        font-size: 14px;
        font-weight: bold;
    }
    .mui-ellipsis {
        font-size: 12px;
        color: #4a82d1;

        /*css3 里面的两端对齐，和下面使用浮动效果一样，尽量能使用 css3 就使用 css3*/
        display: flex;
        justify-content: space-between;
    }

    /*    .f-left {
            display: block;
            float: left;
        }
        .f-right {
            display: block;
            float: right;
        }*/
</style>